<template>
  <div class="AllMails">
    <Table border :columns="mailTableColumns" :data="allMailList"></Table>
    <Page id="pager" :total="totleMails" :page-size="pageSize" :current="currentPageNum" @on-change="pageChange" @on-page-size-change="pageSizeChanged" show-total show-sizer></Page>
  </div>
</template>

<script>
export default {
  name: 'AllMails',
  data() {
    return {
      mailTableColumns: [
        { title: '标题', key: 'title' },
        { title: '发件人', key: 'fromUser' },
        { title: '收件箱', key: 'mailBox' },
        {
          title: '接收时间',
          key: 'receiveTime',
          render(row, column, index) {
            var time = row.receiveTime;
            return time;
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 120,
          render(row) {
            var mailId = row.id;
            return '<Button-group><i-button type="info"  @click="mailDetailBtnClicked(' + mailId + ')" size="small">查看</i-button><i-button type="error" @click="deleteMailBtnClicked(' + mailId + ')" size="small">删除</i-button></Button-group>';
          }
        }
      ],
      allMailList: [],
      totleMails: 0,
      pageSize: 10,
      currentPageNum: 1
    }
  },
  mounted: function () {
    this.getMails(0, this.pageSize);
  },
  methods: {
    //请求邮件接口，获取邮件
    getMails: function (currentPageNum, pageSize, order) {
      this.$http.get('mail/all', {
        params: {
          'current': currentPageNum,
          'pageSize':pageSize,
          'order': order
        }
      },
        { emulateJSON: true }).then(res => {
          this.allMailList = res.body.records;
          this.totleMails = res.body.total;
        });
    },
    //更新邮件列表
    updateMails: function (newPageNow, newPageSize) {
      this.getMails(newPageNow, newPageSize);
    },
    //当前页改变的回调
    pageChange: function (pageNow) {
      console.log('用户点击了第【' + pageNow + '】页');
      this.updateMails(pageNow, this.pageSize);
    },
    //页面大小改变的回调
    pageSizeChanged: function (pageSizeNow) {
      console.log('当前每页显示大小为:' + pageSizeNow);
      this.updateMails(1, pageSizeNow);
    },
    mailDetailBtnClicked: function (mailId) {
      console.log("要查看的邮件id:" + mailId);
      this.$router.push("/mail/detail/" + mailId);
    },
    deleteMailBtnClicked: function (mailId) {
      console.log("要删除的邮件id:" + mailId);
      this.$Notice.error({
        title: '别乱删！',
        desc: false ? '' : '不好意思，现在不让你删！'
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#pager {
  margin-top: 10px;
}
</style>
